<template>
  <a-drawer v-model:open="open"
            :keyboard="false"
            title="船员上船"
            :mask-closable="false"
            width="50%"
            wrap-class-name="full-modal"
            @close="handleClose"
            @cancel="handleClose">
    <div class="content-body container">
      <a-row :gutter="40">
        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10"><span class="red mr2">*</span>上船船员：</div>
            <a-select
                ref="select"
                class="w100"
                placeholder="请选择"
                allow-clear
                show-search
                style="width: 120px"
                @change="(value,option)=>handleChangeShangChuan(value,option)"
                v-model:value="formState.shangChuanChuanYuanMing">
              <a-select-option v-for="item in chuanyuanList" :key="item.id" :value="item.xingMing">
                  {{item.xingMing}}
                </a-select-option>
            </a-select>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">上船船员身份号：</div>
            <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShenFenHao"/>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">兼任职务：</div>
            <a-select
                v-model:value="formState.jianRenZhiWu"
                ref="select"
                class="w100"
                show-search
                placeholder="请选择"
                allow-clear
                style="width: 120px">
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                  item.zhiWeiMing
                }}
              </a-select-option>
            </a-select>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10"><span class="red mr2">*</span>上船日期：</div>
            <a-date-picker v-model:value="formState.shangChuanRiQi" maxlength="100" class="w100"  placeholder="请填写" value-format="YYYY-MM-DD" format="YYYY-MM-DD"/>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="12">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10"><span class="red mr2">*</span>职位：</div>
            <a-select
                v-model:value="formState.zhiWei"
                ref="select"
                class="w100"
                show-search
                placeholder="请选择"
                disabled
                allow-clear
                style="width: 120px">
              <a-select-option v-for="item in zhiweiList" :key="item.id" :value="item.zhiWeiMing">{{
                  item.zhiWeiMing
                }}
              </a-select-option>
            </a-select>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">上船船员手机号：</div>
            <a-input :rows="1" placeholder="" maxlength="400" disabled v-model:value="formState.shangChuanYuanShouJiHao"/>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">任职说明：</div>
            <a-input :rows="1" placeholder="请填写" maxlength="400" v-model:value="formState.renZhiShuoMing"/>
          </div>
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">上船港口：</div>
            <a-input placeholder="请填写" maxlength="100" v-model:value="formState.shangChuanGangKou"/>
          </div>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <div class="gutter-box fw mb10">
            <div class="mr6 mb10">备注：</div>
            <a-textarea :rows="2" placeholder="请填写" maxlength="400" v-model:value="formState.beiZhu"/>
          </div>
        </a-col>
      </a-row>

    </div>
    <template #footer>
      <div class="gui-padding">
        <a-button type="primary" @click="handleSubmit" :loading="addLoading" class="mr10">保存</a-button>
        <a-button type="default" @click="handleClose">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>

<script setup>
const zhiweiList = ref([])
const chuanyuanList = ref([])
const open = ref(false)
const addLoading = ref(false)
const emits = defineEmits(["success"])
const formState = ref({
  id: "",
  shangChuanChuanYuanId: null,
  shangChuanChuanYuanMing: "",
  shangChuanYuanShenFenHao:"",
  shangChuanYuanShouJiHao:"",
  zhiWei: null,
  jianRenZhiWu: null,
  renZhiShuoMing: "",
  shangChuanRiQi: "",
  shangChuanGangKou: "",
  jiHuaXiaChuanRiQi: "",
  jiHuaXiaChuanGangKou: "",
  beiZhu: ""
})

const handleLoadChuanYuanData = async () => {
  var res = await useLoadChuanYuanKuBiaoApi()
  chuanyuanList.value = res.data
}
const handleLoadZhiweiData = async () => {
  var res = await useLoadChuanBoZhiWeiBiaoApi()
  zhiweiList.value = res.data
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    if(!formState.value.shangChuanChuanYuanId){
      useMessage().error("请输入上船船员")
      addLoading.value = false
      return false;
    }
    if(!formState.value.shangChuanRiQi){
      useMessage().error("请输入上船日期")
      addLoading.value = false
      return false;
    }
    await useLoadChuanYuanDiaoPeiSCApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    emits("success")
    handleClose()
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleOpen = async (record) => {
  open.value = true;
  formState.value.id = record.id
  formState.value.zhiWei = record.zhiWei
  await handleLoadChuanYuanData()
  await handleLoadZhiweiData()
}

const handleChangeShangChuan = (key,value) => {
  if (value) {
    var user = chuanyuanList.value.find(obj => obj.id == value.key);
    formState.value.shangChuanChuanYuanId = user.id;
    formState.value.shangChuanChuanYuanMing = user.xingMing;
    formState.value.shangChuanYuanShenFenHao = user.shenFenHao
    formState.value.shangChuanYuanShouJiHao = user.shouJiHao
  } else {
    formState.value.shangChuanChuanYuanId = null
    formState.value.shangChuanChuanYuanMing = ''
    formState.value.shangChuanYuanShenFenHao = ''
    formState.value.shangChuanYuanShouJiHao = ''
  }
}

const handleClose = () => {
  open.value = false;
  formState.value = {
    id: "",
    xiaRenChuanYuanId: "",
    xiaRenChuanYuanMing: "",
    shangChuanYuanShenFenHao:"",
    shangChuanYuanShouJiHao:"",
    zhiWei: null,
    jianRenZhiWu: null,
    renZhiShuoMing: "",
    jiHuaShangChuanRiQi: "",
    jiHuaShangChuanGangKou: "",
    jiHuaXiaChuanGangKou: "",
    beiZhu: ""
  }
}

defineExpose({
  handleOpen
})
</script>
<style lang="scss">
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    border-radius: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    border-radius: 0;
    padding: 0px;
  }

  .ant-modal-body {
    flex: 1;
  }

  .content-body {
    padding: 20px 24px;
  }
}
</style>
